// 主容器布局
.div-container {
	display: flex;
	height: 100%;
	box-sizing: border-box;

	// 左侧面板
	.left {
		width: 320px;
		height: 100%;
		border-right: 1px solid var(--theme-content-border);
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fafafa;
		box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
		position: relative;
		z-index: 1;

		// 中间内容区域
		&-middle {
			padding: 12px;
			height: 80vh;
			overflow-y: auto;
			.section-header {
				font-weight: 400;
				margin-bottom: 4px;
				color: var(--theme-content-text);
			}

			.section-row {
				display: grid;
				gap: 0 10px;
				width: 100%;
				box-sizing: border-box;

				.section-col {
					display: flex;
					flex-direction: column;

					.section-title {
						font-size: 12px;
						color: #9ca3af;
						margin-bottom: 4px;
					}
				}
			}

			// 分隔线
			hr {
				background-color: var(--theme-content-border);
				height: 1px;
				border: none;
				margin: 0 0 12px 0;
			}
		}

		// 底部区域
		&-bottom {
			height: 60px;
			border-top: 1px solid var(--theme-content-border);
			display: flex;
			align-items: center;
			padding: 0 12px;
			gap: 12px;

			.el-button {
				flex: 1;
			}
		}
	}

	// 右侧面板
	.right {
		flex: 1;
		background: var(--theme-content-bg);
	}
}

// 网格布局工具类
.tow-squares {
	grid-template-columns: repeat(2, 1fr);
}

.three-squares {
	grid-template-columns: repeat(3, 1fr);
}

// 元素选择器布局
.element-select-section-row {
	grid-template-columns: 1fr 1fr;
}

// 三元计算特殊布局
.ternary-composition-row {
	grid-template-columns: repeat(3, 1fr);
}

.ternary-range-row {
	grid-template-columns: repeat(2, 1fr);
}

// 全局样式
:deep(.section-input .el-input__wrapper),
:deep(.section-select .el-select__wrapper) {
	font-size: 12px;
	background-color: rgba(255, 255, 255, 0.05);
	border-color: var(--theme-content-border);
}

:deep(.section-input .el-input__inner),
:deep(.section-select .el-select__input) {
	color: var(--theme-content-text);
}

:deep(.section-input.is-disabled .el-input__wrapper),
:deep(.section-select.is-disabled .el-select__wrapper) {
	background-color: rgba(255, 255, 255, 0.02);
}
